<template>
  <div class="calendar-demo">
    <!-- 基础日历 -->
    <div class="demo-section">
      <h3>基础日历</h3>
      <van-cell title="选择单个日期" :value="formatDate(date)" @click="show = true" />
      <van-calendar v-model:show="show" @confirm="onConfirm" />
    </div>

    <!-- 多选日历 -->
    <div class="demo-section">
      <h3>日期多选</h3>
      <van-cell 
        title="选择多个日期" 
        :value="formatMultipleDates(multipleDates)" 
        @click="showMultiple = true" 
      />
      <van-calendar 
        v-model:show="showMultiple"
        type="multiple"
        @confirm="onConfirmMultiple"
      />
    </div>

    <!-- 区间选择 -->
    <div class="demo-section">
      <h3>日期区间</h3>
      <van-cell 
        title="选择日期区间" 
        :value="formatDateRange(dateRange)" 
        @click="showRange = true" 
      />
      <van-calendar 
        v-model:show="showRange"
        type="range"
        @confirm="onConfirmRange"
      />
    </div>

    <!-- 自定义日历 -->
    <div class="demo-section">
      <h3>自定义日历</h3>
      <van-calendar 
        :show-confirm="false"
        :style="{ height: '300px' }"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        color="#1989fa"
      />
    </div>

    <!-- 默认展开的日历 -->
    <div class="demo-section">
      <h3>默认展开日历</h3>
      <van-calendar 
        :poppable="false"
        :show-confirm="false"
        :style="{ height: '500px' }"
        :min-date="defaultMinDate"
        :max-date="defaultMaxDate"
        :default-date="defaultSelectedDate"
        :formatter="formatter"
        @select="onSelectInline"
      />
    </div>

    <!-- 默认展开的时间段日历 -->
    <div class="demo-section">
      <h3>默认展开时间段日历</h3>
      <van-calendar 
        :poppable="false"
        :show-confirm="false"
        :style="{ height: '500px' }"
        type="range"
        :min-date="defaultMinDate"
        :max-date="defaultMaxDate"
        :default-date="defaultRangeDate"
        :formatter="formatter"
        @select="onSelectRange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { showToast } from 'vant'

// 单选日期
const show = ref(false)
const date = ref('')

// 多选日期
const showMultiple = ref(false)
const multipleDates = ref([])

// 日期区间
const showRange = ref(false)
const dateRange = ref([])

// 自定义日历
const minDate = new Date(2023, 0, 1)
const maxDate = new Date(2023, 11, 31)

// 默认展开日历的配置
const defaultMinDate = new Date(2024, 0, 1)
const defaultMaxDate = new Date(2024, 11, 31)
const defaultSelectedDate = new Date()

// 默认展开时间段日历的配置
const defaultRangeDate = [
  new Date(2024, 0, 15),
  new Date(2024, 0, 23)
]

// 日期格式化
const formatter = (day) => {
  const month = day.date.getMonth() + 1
  const date = day.date.getDate()

  // 周末标记
  if (day.type === 'start') {
    day.bottomInfo = '开始'
  } else if (day.type === 'end') {
    day.bottomInfo = '结束'
  }

  // 节假日标记
  if (month === 1 && date === 1) {
    day.topInfo = '元旦'
  } else if (month === 5 && date === 1) {
    day.topInfo = '劳动节'
  }

  // 价格标记
  if (day.type === 'disabled') {
    day.text = '休'
  }

  return day
}

// 格式化单个日期
const formatDate = (date) => {
  if (!date) return ''
  return new Date(date).toLocaleDateString()
}

// 格式化多个日期
const formatMultipleDates = (dates) => {
  if (!dates.length) return ''
  return dates.map(date => new Date(date).toLocaleDateString()).join(', ')
}

// 格式化日期区间
const formatDateRange = (dateRange) => {
  if (!dateRange.length) return ''
  return `${new Date(dateRange[0]).toLocaleDateString()} - ${new Date(dateRange[1]).toLocaleDateString()}`
}

// 单选确认
const onConfirm = (value) => {
  date.value = value
  show.value = false
  showToast('选择日期：' + formatDate(value))
}

// 多选确认
const onConfirmMultiple = (dates) => {
  multipleDates.value = dates
  showMultiple.value = false
  showToast('选择了 ' + dates.length + ' 个日期')
}

// 区间选择确认
const onConfirmRange = ([start, end]) => {
  dateRange.value = [start, end]
  showRange.value = false
  showToast(`选择了 ${formatDate(start)} 至 ${formatDate(end)}`)
}

// 内联日历选择处理
const onSelectInline = (value) => {
  showToast(`选择了日期：${formatDate(value)}`)
}

// 时间段选择处理
const onSelectRange = (value) => {
  if (Array.isArray(value)) {
    const [start, end] = value
    if (start && end) {
      showToast(`选择了时间段：${formatDate(start)} 至 ${formatDate(end)}`)
    }
  }
}
</script>

<style scoped>
.calendar-demo {
  padding: 16px;
}

.demo-section {
  margin-bottom: 24px;
}

.demo-section h3 {
  margin-bottom: 16px;
  color: #323233;
  font-weight: normal;
  font-size: 14px;
}

:deep(.van-calendar__day) {
  height: 48px;
}

:deep(.van-calendar__selected-day) {
  background-color: var(--van-calendar-selected-day-background-color);
  color: var(--van-calendar-selected-day-color);
}

/* 默认展开日历的样式 */
:deep(.van-calendar__header) {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

:deep(.van-calendar__month-title) {
  font-weight: bold;
  color: #323233;
}

/* 时间段日历的样式 */
:deep(.van-calendar__month-mark) {
  color: #c8c9cc;
  font-size: 160px;
  opacity: 0.1;
}

:deep(.van-calendar__selected-day) {
  background: var(--van-primary-color);
}

:deep(.van-calendar__selected-day.van-calendar__middle-day) {
  background: var(--van-primary-color);
  opacity: 0.1;
}

:deep(.van-calendar__selected-day.van-calendar__end-day),
:deep(.van-calendar__selected-day.van-calendar__start-day) {
  background: var(--van-primary-color);
  opacity: 1;
}
</style>
